<template>
	<view style="">
		<picker class="category-picker" @change="categorysChange" range-key="name" :value="categorysIndex"
			:range="list">
			<text class="padding-tb" v-if="categorysIndex <= -1">
				请选择产品系列
			</text>
			<text v-else class="padding-tb">
				{{list[categorysIndex].name}}
			</text>
			<text  class="cuIcon-right target"></text>
		</picker>
		<view class="category-picker">
			<category v-if="targetCategory.subCategory.length > 0" :list="targetCategory.subCategory"
				v-model="currentCategory.subTarget"></category>
		</view>
	</view>
</template>

<script>
	export default {
		name: "category",
		props: {
			list: Array,
			value: Object,
		},
		created: function() {},
		data: function() {
			return {
				categorysIndex: -1,
				currentCategory: {},
				targetCategory: {}
			}
		},
		methods: {
			categorysChange: function(e) {
				this.categorysIndex = e.detail.value;
				this.targetCategory = this.list[this.categorysIndex];
				this.currentCategory.categoryId = this.targetCategory.categoryId;
				this.currentCategory.name = this.targetCategory.name;
				this.currentCategory.subTarget = {};
				this.$emit("input", this.currentCategory);
			}
		}
	}
</script>

<style scoped>
	.category-picker {
		display: block;
		width: 100%;
		text-align: right;
		margin: 30rpx 0;
	}
	
	.target {
		padding-left: 20rpx;
	}

	picker::after {
		content: none !important;
	}
</style>
